<template>
  <div class="container-color">
    <div class="container-title">
      <h1>{{ appIntroductionList.titleName }}</h1>
    </div>

    <div class="container">
      <div class="container-feature" v-html="appIntroductionList.appContent"/>
      <div class="container-right">
        <div class="download-top">
          <h2>下载地址</h2>
          <p style="color: #909399; font-size: 13px">
            本站所有软件均来源于网络 仅供学习使用，请支持正版
          </p>
          <el-button
            type="info"
            plain
            style="width: 140px; height: 40px; font-size: 14px"
            :icon="Monitor"
            round
            @click="clickOfficial(appIntroductionList.officialAddress)"
          >访问官网
          </el-button
          >
        </div>

        <div class="download-middle">
          <h2>网盘下载</h2>
          <el-button
            type="primary"
            @click="clickBaidu(appIntroductionList.diskAddress)"
            plain
            style="width: 140px; height: 40px; font-size: 14px"
            round
          >
            <i class="el-icon-baidu"/>
            访问网盘
          </el-button>
        </div>
      </div>
    </div>
  </div>
  <FeatureSectionLogo/>
</template>

<script setup lang="ts">
import {Monitor} from "@element-plus/icons-vue";
import {watch, ref} from "vue";
import {getInfoAPI} from "@/api/nexusSphere/librarypage.js";
import FeatureSectionLogo from "@/components/FeatureSectionLogo.vue";
import {useRoute} from "vue-router";

interface AppIntroduction {
  titleName: string;
  appContent: string;
  officialAddress: string;
  diskAddress: string;
}

const clickOfficial = (url: string) => {
  window.open(url);
};

const clickBaidu = (url: string) => {
  window.open(url);
};

const appIntroductionList = ref<AppIntroduction>({
  titleName: "",
  appContent: "",
  officialAddress: "",
  diskAddress: "",
});
const route = useRoute();
const getList = async () => {
  const idParam = route.params.id;

  // 类型检查与转换
  if (typeof idParam === 'string') {
    const id = parseInt(idParam, 10);
    if (isNaN(id)) {
      console.error('无效的 ID 参数');
      return;
    }

    const res = await getInfoAPI(id);
    appIntroductionList.value = res.data.data;


  } else {
    console.error('ID 参数不是字符串类型');
  }
};

// 使用 watch 监听 route.params.id 的变化
watch(
  () => route.params.id,
  async (newId) => {
    if (newId) {
      await getList(); // 参数变化时重新获取数据
    }
  },
  {immediate: true} // 立即执行一次，确保初始化时也获取数据
);

</script>

<style lang="scss">
.container-color {
  background-color: #f2f3f5;
  width: 100%;
  height: 100%;
  padding: 30px;
  box-sizing: border-box;

  .container-title {
    margin-left: 65px;
    text-align: left;
  }

  .container {
    display: flex;
    flex-direction: row;
    justify-content: center;

    .container-feature {
      text-align: left;
      width: 1200px;
      height: 100%;
      border-radius: 20px;
      background-color: #fff;

      padding: 1px 20px 20px 20px;

      display: flex; /* 添加 Flexbox 布局 */
      flex-direction: column; /* 垂直排列子元素 */
      justify-content: center; /* 垂直居中 */

      img {
        height: 571px;
        width: 100%;
      }
    }

    .container-right {
      width: 300px;
      height: 200px;
      margin-left: 20px;
      text-align: center;

      border-radius: 20px;

      .download-top {
        padding: 10px;
        display: flex;
        background-color: #ffffff;
        width: 280px;
        height: 250px;
        border-radius: 20px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

      .download-middle {
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 300px;
        height: 150px;
        background-color: #ffffff;
        border-radius: 20px;

        .el-icon-baidu {
          background: url("@/assets/baidu.png") center no-repeat;
          font-size: 23px;
          background-size: cover;
          margin-right: 2px;
        }

/*         .el-icon-baidu:before {
          content: "百度";
          font-size: 12px;
          visibility: hidden;
        } */
      }
    }
  }
}
</style>
